<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户名称">
                <a-input placeholder="请输入用户名称" v-model="queryParam.nickname" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号码">
                <a-input placeholder="请输入手机号码" v-model="queryParam.mobile" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList()">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">
      <a-table
        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        size="default"
        :columns="columns"
        :data-source="list"
        :row-key="record => record.id"
        :pagination="{
          total: this.total,
          pageSize: this.pageSize,
          showSizeChanger: false,
          onChange: this.tablePageChange
        }"
      >
        <span slot="content" slot-scope="text, record">
          <div class="content">
            <div class="img">
              <a-avatar shape="square" :size="48" icon="user" :src="record.avatar" />
            </div>

            <div class="txt">
              <h3>{{ record.name }}</h3>
              <p>{{ record.mobile }}</p>
            </div>
          </div>
        </span>

        <span slot="has_store" slot-scope="text, record">
          <a-switch
            @click="e => changeStatus(e, 'has_store', record)"
            :checked="record.has_store"
            checked-children="开"
            un-checked-children="关"
            default-checked
            :disabled="record.has_store"
          />
        </span>

        <span slot="right2" slot-scope="text, record">
          <a-switch
            @click="e => changeStatus(e, 'right2', record)"
            :checked="record.right2"
            checked-children="开"
            un-checked-children="关"
            default-checked
          />
        </span>

        <span slot="store_referral" slot-scope="text, record">
          <a-switch
            @click="e => changeStatus(e, 'right3', record)"
            :checked="record.right3"
            checked-children="开"
            un-checked-children="关"
            default-checked
          />
        </span>

        <span slot="right1" slot-scope="text, record">
          <a-switch
            @click="e => changeStatus(e, 'right1', record)"
            :checked="record.right1"
            checked-children="开"
            un-checked-children="关"
            default-checked
          />
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { rightList, rightStatus } from '@/api/saas/right'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 50
  },
  {
    title: '用户信息',
    scopedSlots: {
      customRender: 'content'
    },
    width: 300
  },
  {
    title: '店铺分销',
    scopedSlots: {
      customRender: 'has_store'
    }
  },
  {
    title: '联盟分销',
    scopedSlots: {
      customRender: 'right2'
    }
  },
  {
    title: '店铺推荐人',
    scopedSlots: {
      customRender: 'store_referral'
    }
  },
  {
    title: '消费返利',
    scopedSlots: {
      customRender: 'right1'
    }
  }
]
export default {
  data() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 10,
      columns,

      queryParam: {
        nickname: '',
        mobile: ''
      },

      list: [],

      selectedRowKeys: []
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    // 获取数据列表
    async getList(pageNo = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { queryParam, pageSize } = this

      const res = await rightList({
        ...queryParam,
        pageSize,
        pageNo
      })
      if (res.code == 0) {
        this.$nextTick(() => {
          this.selectedRowKeys = []
          let { totalCount, data } = res.data
          this.total = totalCount
          this.list = data
        })
      }
      hide()
    },

    // 分页请求
    tablePageChange(e) {
      this.getList(e)
    },

    // 选中多行
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    // 修改状态
    changeStatus(e, el, item) {
      if (['has_store'].includes(el)) {
        this.$message.error('请申请店铺~')
        return
      }

      let { id: saas_id, right1, right2, right3 } = item,
        rid = 1,
        open = 0

      if (el === 'right2') {
        rid = 2

        if (!right2) {
          open = 1
        }
      }else if (el === 'right3') {
        rid = 3

        if (!right3) {
          open = 1
        }
      } else {
        if (!right1) {
          open = 1
        }
      }

      rightStatus({
        saas_id,
        rid,
        open
      }).then(res => {
        if (res.code !== 0) {
          this.$error({
            content: res.msg
          })
          return
        }
        this.$message.success(res.msg)
        this.$set(item, el, open)
        this.selectedRowKeys = []
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  align-items: center;
  height: 48px;
  max-width: 300px;
  overflow: hidden;

  .txt {
    margin-left: 16px;
    flex: 1;
    overflow: hidden;

    * {
      margin: 0;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    h3 {
      color: rgba(0, 0, 0, 0.85);
    }

    p {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style>
